<template>
  <div class="app-container">
    <div class="cardBox">
      <el-button
        @click="gobackWay"
        type="text"
        icon="el-icon-arrow-left"
        style="color: rgba(0, 0, 0, 0.85)"
        >返回</el-button
      >
      <el-divider direction="vertical"></el-divider>
      <span>添加/编辑协议</span>
      <el-button
        style="float: right"
        type="primary"
        size="small"
        @click="addDictionaryWay"
        icon="el-icon-circle-plus-outline"
        >添加字典内容</el-button
      >
    </div>
    <div
      class="cardBox"
      style="height: calc(85vh - 80px); margin-top: 20px"
      v-loading="loading"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in agreementList"
          :key="index"
          :label="item.tag_name"
          :name="item.tag_name"
        >
          <div style="display: flex">
            <div style="width: 70%">
              <el-scrollbar
                wrap-style="overflow-x:hidden;"
                style="height: calc(70vh - 80px)"
              >
                <tinymce-editor
                  v-if="formContentBool"
                  v-model="form.content"
                  :height="750"
                />
              </el-scrollbar>
            </div>
            <div style="flex: 1">
              <div
                id="phone"
                style="
                  width: 275px;
                  height: 555px;
                  border: 2px solid rgb(59, 59, 59);
                  border-radius: 30px;
                  margin: 10px auto;
                  background: rgb(46, 46, 46);
                "
              >
                <div
                  class="tingtong"
                  style="
                    width: 120px;
                    height: 8px;
                    border: 2px solid rgb(80, 80, 80);
                    background: rgb(26, 26, 26);
                    border-radius: 10px;
                    margin: 6px auto;
                  "
                ></div>
                <div
                  class="screen"
                  style="
                    height: 508px;
                    width: 260px;
                    background: #ffffff;
                    border: 1px solid rgb(28, 28, 28);
                    margin: 6px auto;
                    padding: 5px;
                  "
                >
                  <el-scrollbar
                    wrap-style="overflow-x:hidden;"
                    style="height: 498px"
                  >
                    <div v-html="form.content"></div>
                  </el-scrollbar>
                </div>
                <div
                  class="btn"
                  style="
                    width: 70px;
                    height: 17px;
                    background: rgb(26, 26, 26);
                    border-radius: 30px;
                    margin: -2px auto;
                  "
                ></div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-row style="text-align: center; margin-top: 10px">
        <el-button type="primary" @click="submitWay">保存</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getDictionaryTypeList } from "@/api/index";
import {
  getSysAgreementConfigList,
  SaveSysAgreement,
} from "@/api/admin/agreement";
import TinymceEditor from "@/components/Tinymce";
export default {
  components: {
    TinymceEditor,
  },
  data() {
    return {
      loading: true,
      id: "",
      valueId: "",
      activeName: "",
      agreementDetail: "1",
      agreementList: [],
      keyId: "",
      agreementClass: {},
      formContentBool: false,
      form: {
        id: "",
        content: "",
        version: "",
        status: 1,
        dictionary_value_id: "",
        dictionary_id: "",
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    if (this.$route.query.valueId) {
      this.valueId = this.$route.query.valueId;
    }
    const p1 = new Promise((req, rej) => {
      getDictionaryTypeList({ type: "sys_agreement_type", status: 1 }).then(
        (res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            rej();
            return;
          }
          this.agreementList = res.data;
          if (this.$route.query.valueId) {
            this.agreementList.forEach((item) => {
              if (this.$route.query.valueId == item.id) {
                this.activeName = item.tag_name;
                this.keyId = item.id;
                this.agreementClass = item;
              }
            });
          } else {
            this.activeName = res.data[0].tag_name;
            this.keyId = res.data[0].id;
            this.agreementClass = res.data[0];
          }

          req();
        }
      );
    });
    Promise.all([p1])
      .then(() => {
        this.getListWay();
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    getListWay() {
      if (this.id) {
        this.keyId = this.valueId;
      }
      getSysAgreementConfigList({ value_id: this.keyId }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          this.$messages.error(res.msg);
          return;
        }
        if (res.data.list.length != 0) {
          var obj = res.data.list[0];
          this.form.dictionary_id = obj.dictionary_id;
          this.form.dictionary_value_id = obj.dictionary_value_id;
          this.form.version = obj.version;
          this.form.content = obj.content;
          this.form.id = obj.id;
          this.formContentBool = true;
        } else {
          this.form.dictionary_id = this.agreementClass.dictionary_id;
          this.form.dictionary_value_id = this.agreementClass.id;
          this.formContentBool = true;
        }
        this.loading = false;
      });
    },
    submitWay() {
      var _this = this;
      if (!this.form.content) {
        return this.$messages.error("请输入协议内容");
      }
      this.$prompt(
        "请输入版本号(" +
          (this.form.version
            ? "当前版本号为:" + this.form.version
            : "没有版本号,请输入") +
          ")",
        "提示",
        {
          inputValue: this.form.version,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /[0-9.]/,
          inputErrorMessage: "版本号只能为数字和.组成",
        }
      )
        .then(({ value }) => {
          this.form.version = value;
          this.loading = true;
          SaveSysAgreement(this.form).then((res) => {
            this.loading = true;
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.loading = false;
            this.$confirm("保存成功, 是否继续编辑其他协议?", "提示", {
              confirmButtonText: "继续编辑",
              cancelButtonText: "返回列表",
              type: "success",
            })
              .then(() => {})
              .catch(() => {
                _this.gobackWay();
              });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });
    },
    handleClick(val) {
      this.loading = true;
      this.form.version = "";
      this.form.content = "";
      this.form.id = "";
      this.formContentBool = false;
      this.agreementList.forEach((item) => {
        if (val.name == item.tag_name) {
          this.activeName = item.tag_name;
          this.keyId = item.id;
          this.agreementClass = item;
          getSysAgreementConfigList({ value_id: this.keyId }).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            if (res.data.list.length != 0) {
              var obj = res.data.list[0];
              this.form.dictionary_id = obj.dictionary_id;
              this.form.dictionary_value_id = obj.dictionary_value_id;
              this.form.version = obj.version;
              this.form.content = obj.content;
              this.form.id = obj.id;
              this.formContentBool = true;
              this.loading = false;
            } else {
              this.form.dictionary_id = this.agreementClass.dictionary_id;
              this.form.dictionary_value_id = this.agreementClass.id;
              this.form.content = "";
              this.formContentBool = true;
              this.loading = false;
            }
          });
        }
      });
    },
    addDictionaryWay() {
      this.$router.push("/admin/dictionary/subdictionary?parentId=17");
    },
    gobackWay() {
      this.$router.push("/admin/agreement");
    },
  },
};
</script>

<style lang="scss" scoped>
.btn:before {
  width: 8px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 30%;
  content: "";
  display: inline-block;
  margin-top: 0px;
  margin-left: 32px;
}
</style>